<template>
    <div class="warp" style="height:100%;">
        <navbar>
            <template #title>
                <div class="header-btn-search">
                    <router-link tag="div" to="/search">
                        <span>
                            {{ $t("button_search") }}
                        </span>
                    </router-link>
                </div>
            </template>
        </navbar>
        <div class="content">
            <router-view></router-view>
        </div>
        <div class="add-icon-box" @click="addKnowledge()">
            <i class="add-icon"></i>
        </div>
<!--        <knowledge-bottom-nav></knowledge-bottom-nav>-->
        <div class="mask-layer" v-if="popupMask" @click="maskLayer()" @touchmove.prevent></div>
        <div class="popup-box white-bg" v-if="popupLayerCreate" @touchmove.prevent>
            <div class="close-box clearfix"><i class="close-icon-02" @click="maskLayer()"></i></div>
            <ul class="pic-box-list clearfix">
<!--                <li @click="picBoxLayer('IMAGE')">-->
<!--                    <span>-->
<!--                        <i class="pic-icon"></i>-->
<!--                    </span>-->
<!--                    <p>{{ $t("IMAGE") }}</p>&lt;!&ndash;图片&ndash;&gt;-->
<!--                </li>-->
<!--                <li @click="picBoxLayer('VEDIO')">-->
<!--                    <span>-->
<!--                        <i class="video-icon"></i>-->
<!--                    </span>-->
<!--                    <p>{{ $t("VEDIO") }}</p>&lt;!&ndash;视频&ndash;&gt;-->
<!--                </li>-->
                <li @click="picBoxLayer('ARTICLE')">
                    <span>
                        <i class="essay-icon"></i>
                    </span>
                    <p>{{ $t("ARTICLE") }}</p><!--文章-->
                </li>
                <li @click="picBoxLayer('DOCUMENT')">
                    <span>
                        <i class="doc-icon"></i>
                    </span>
                    <p>{{ $t("DOCUMENT") }}</p><!--文档-->
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            popupMask: false,
            popupLayerCreate: false
        };
    },
    methods: {
        addKnowledge() {
            this.popupMask = true;
            this.popupLayerCreate = true;
        },
        maskLayer() {
            this.popupMask = false;
            this.popupLayerCreate = false;
        },
        picBoxLayer(type) {
            this.popupMask = false;
            this.popupLayerCreate = false;
            this.$router.push({path: '/addShare', query: {type}});
        }
    }
};
</script>

<style scoped>
    .close-box {
        margin: 0 0 15px 0;
    }
    .close-icon-02 {
        margin-right: 15px;
    }
</style>
